<template>
  <div id="components-form-demo-advanced-search">
    <a-form class="ant-advanced-search-form a-form-bottom-margin" :form="form" @submit.prevent="handleSearch">
      <a-row :gutter="24">
        <a-col
          :span="6"
        >
          <a-form-item label="后台用户" :label-col="{ span: 6 }">
            <a-input
              v-decorator="[
                'number',
              ]"
              placeholder="placeholder"
            />
          </a-form-item>
        </a-col>
        <a-col
          :span="8"
        >
          <a-form-item label="日期">
            <a-range-picker
              v-decorator="['range_time_picker']"
              show-time
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
            />
          </a-form-item>
        </a-col>
        <a-col :span="10" style="margin-top: 3px">
          <a-button
            type="primary"
            html-type="submit"
            @click.prevent="handleSearch"
          >
            Search
          </a-button>
          <a-button :style="{ marginLeft: '8px' }" @click.prevent="handleReset">
            Clear
          </a-button>
        </a-col>
        <slot />
      </a-row>
    </a-form>
  </div>
</template>

<script>
import form from '@/utils/mixins/search/form'

export default {
  mixins: [form],

  methods: {
    handleSearch () {
      const fields = this.form.getFieldsValue()

      const date = fields.range_time_picker

      fields.start_time = date ? `${date[0]}` : date
      fields.end_time = date ? `${date[1]}` : date

      delete fields.range_time_picker

      this.$emit('search', fields)
    },
  },
}
</script>

<style lang="scss">
#components-form-demo-advanced-search  {
  .ant-form {
    max-width: none;
    .ant-form-item {
      display: flex;
      .ant-calendar-picker {
        width: 100%!important;
      }
      .ant-form-item-control-wrapper {
        flex: 1;
      }
    }
  }
}
</style>
